/*
 * @Author: AiLjx
 * @Date: 2022-05-16 18:17:25
 * @LastEditors: AiLjx
 * @LastEditTime: 2022-07-25 22:09:25
 */
import { Card, Form, Input, Button, Checkbox, message } from "antd";
import { useStore } from "@/store";
import { getToken } from "@/utils";
import { useNavigate } from "react-router-dom";
import logo from "@/assets/logo.svg";
import "./index.scss";
import { useEffect } from "react";

function Login() {
    const navigate = useNavigate();
    const { loginStore } = useStore();
    const isToken = getToken();
    // 存在token时跳转到首页
    useEffect(() => {
        if (isToken) {
            navigate("/");
        }
    }, [isToken, navigate]);

    //登录
    const onFinish = async (values) => {
        const { mobile, code } = values;
        try {
            await loginStore.login({
                mobile,
                code,
            });
            navigate("/");
            message.success("登录成功！");
        } catch (e) {
            message.error(e.response?.data?.message || "登录失败");
        }
    };
    //表单错误处理
    const onFinishFailed = (errorInfo) => {
        console.log("Failed:", errorInfo);
    };
    return (
        <div className='login'>
            <Card className='login-container'>
                <img className='login-logo' src={logo} alt='' />
                {/* 登录表单 */}
                <Form
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                    initialValues={{
                        remember: true,
                    }}
                    validateTrigger={["onBlur", "onChange"]}>
                    <Form.Item
                        name='mobile'
                        rules={[
                            {
                                // pattern正则表达式匹配
                                pattern: /^1[3-9]\d{9}$/,
                                message: "手机号码格式不对",
                                //触发时机
                                validateTrigger: "onBlur",
                            },
                            { required: true, message: "请输入手机号" },
                        ]}>
                        <Input size='large' placeholder='请输入手机号' />
                    </Form.Item>
                    <Form.Item
                        name='code'
                        rules={[
                            {
                                required: true,
                                message: "请输入验证码!",
                            },
                            {
                                len: 6,
                                message: "请输入6位验证码",
                                validateTrigger: "onBlur",
                            },
                        ]}>
                        <Input.Password
                            size='large'
                            placeholder='请输入验证码246810'
                        />
                    </Form.Item>
                    <Form.Item name='remember' valuePropName='checked'>
                        <Checkbox className='login-checkbox-label'>
                            我已阅读并同意「用户协议」和「隐私条款」
                        </Checkbox>
                    </Form.Item>

                    <Form.Item>
                        {/* <!-- 渲染Button组件为submit按钮 --> */}
                        <Button
                            type='primary'
                            htmlType='submit'
                            size='large'
                            block>
                            登录
                        </Button>
                    </Form.Item>
                </Form>
            </Card>
        </div>
    );
}
export default Login;
